<template>
    <div class="tab-box">
        <n-tabs
            v-if="store.pageTabs?.length"
            :value="route.path"
            type="card"
            :tab-style="tabStyle"
            @close="handleClose"
            @update:value="onChange"
        >
            <n-tab
                v-for="panel in store.pageTabs"
                :key="panel.path"
                :closable="panel.path !== '/home-page'"
                :class="{ 'is-home-page': panel.path === '/home-page' }"
                :tab="panel.title"
                :name="panel.path"
            >
            </n-tab>
        </n-tabs>
        <n-dropdown :options="options" trigger="click" @select="onSelect">
            <div class="close-icon">
                <n-icon :size="24">
                    <ChevronDownOutline />
                </n-icon>
            </div>
        </n-dropdown>
    </div>
</template>

<script setup>
import { ChevronDownOutline } from '@vicons/ionicons5';
import { ref } from 'vue';
import { useStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';

const store = useStore();
const router = useRouter();
const route = useRoute();

const tabStyle = ref({
    padding: '4px'
});
const options = [
    {
        label: '关闭当前',
        key: 'current'
    },
    {
        label: '关闭左侧',
        key: 'left'
    },
    {
        label: '关闭右侧',
        key: 'right'
    },
    {
        label: '关闭其他',
        key: 'other'
    },
    {
        label: '关闭所有',
        key: 'all'
    }
];
const onChange = val => {
    router.push({
        path: val
    });
};
const onSelect = val => {
    let list = store.pageTabs;
    const i = list.findIndex(x => x.path === route.path);
    switch (val) {
        case 'current':
            if (i > 0) {
                list.splice(i, 1);
                const target = list[i - 1];
                onChange(target.path);
            }
            break;
        case 'left':
            if (i > 1) {
                list.splice(i - 1, 1);
            }
            break;
        case 'right':
            if (i !== list.length - 1) {
                list.splice(i + 1, 1);
            }
            break;
        case 'other':
            list = list.filter(item => {
                return item.path === '/home-page' || item.path === route.path;
            });
            break;
        case 'all':
            list = [list[0]];
            onChange(list[0].path);
            break;
        default:
            break;
    }
    store.setPageTabs(list);
};
const handleClose = val => {
    const list = store.pageTabs;
    const i = list.findIndex(x => x.path === val);
    if (i > -1) {
        list.splice(i, 1);
    }
    store.setPageTabs(list);
    if (val === route.path) {
        const newIndex = i - 1;
        const target = list[newIndex];
        onChange(target?.path);
    }
};
</script>
<style lang="less" scoped>
.tab-box {
    height: 36px;
    display: flex;
    align-items: center;
    padding-left: 16px;
    background-color: #fff;

    .home-page {
        width: 80px;
        height: 31px;
        text-align: center;
        line-height: 31px;
        margin-right: 4px;
        white-space: nowrap;
        background-color: rgb(247, 247, 250);
        border: 1px solid rgb(239, 239, 245);

        &:hover {
            cursor: pointer;
        }
    }

    .active {
        color: #18a058;
        background-color: #fff;
        border-bottom-color: transparent;
    }

    :deep(.n-tabs) {
        margin-top: 5px;
        width: auto;
        flex: 1;
        overflow: hidden;

        .is-home-page {
            display: inline-flex;
            justify-content: center;
            min-width: 62px;
        }

        .n-tabs-nav.n-tabs-nav--top.n-tabs-nav--card-type .n-tabs-pad {
            // border-bottom: none;
        }
    }

    .close-icon {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-bottom: 1px solid var(--grey-200);

        &:hover {
            background-color: var(--grey-100);
        }
    }
}
</style>
